<template>
    <div>
        <Card v-if="totalProductNum===0">
            您尚未点赞任何商品
        </Card>
        <div v-else>
            <Row :gutter="8">
                <Col span="6">
                    <Card v-for="(item,index) in starsList1" :key="item.starId" :value="item.starId" @click.native="brief(item.starProductId)">
                        <img v-bind:src="starsCoverList[index*4]" style="width: 100%;height: auto">
                        <p style="font-weight: bold">{{ item.starProductName }}</p>
                        点赞时间{{ item.starDate }}
                    </Card>
                </Col>
                <Col span="6">
                    <Card v-for="(item,index) in starsList2" :key="item.starId" :value="item.starId" @click.native="brief(item.starProductId)">
                        <img v-bind:src="starsCoverList[index*4+1]" style="width: 100%;height: auto">
                        <p style="font-weight: bold">{{ item.starProductName }}</p>
                        点赞时间{{ item.starDate }}
                    </Card>
                </Col>
                <Col span="6">
                    <Card v-for="(item,index) in starsList3" :key="item.starId" :value="item.starId" @click.native="brief(item.starProductId)">
                        <img v-bind:src="starsCoverList[index*4+2]" style="width: 100%;height: auto">
                        <p style="font-weight: bold">{{ item.starProductName }}</p>
                        点赞时间{{ item.starDate }}
                    </Card>
                </Col>
                <Col span="6">
                    <Card v-for="(item,index) in starsList4" :key="item.starId" :value="item.starId" @click.native="brief(item.starProductId)">
                        <img v-bind:src="starsCoverList[index*4+3]" style="width: 100%;height: auto">
                        <p style="font-weight: bold">{{ item.starProductName }}</p>
                        点赞时间{{ item.starDate }}
                    </Card>
                </Col>
            </Row>
            <Col class="mid">
                <Page :total="totalProductNum" @on-change="handlePage" page-size="48" show-total/>
            </Col>
        </div>
    </div>
</template>

<script>
    import globalData from "@/utils/globalData";
    import axios from "axios";

    export default {
        name: "MyStars",
        data() {
            return {
                totalProductNum: 0,
                nowPage: 1,
                allStarsList:[],
                starsList1: [],
                starsList2: [],
                starsList3: [],
                starsList4: [],
                starsCoverList: []
            }
        },
        created: function () {
            let self = this
            axios({
                method: 'get',
                url: '/product/starList/' + globalData.USER.userId + "/1"
            }).then(function (res) {
                self.totalProductNum = res.data.totalElements
                self.allStarsList=res.data.content
                for (let i = 0; i < self.allStarsList.length; i++) {
                    if (i % 4 === 0) {
                        self.starsList1.push(self.allStarsList[i])
                    } else if (i % 4 === 1) {
                        self.starsList2.push(self.allStarsList[i])
                    } else if (i % 4 === 2) {
                        self.starsList3.push(self.allStarsList[i])
                    } else {
                        self.starsList4.push(self.allStarsList[i])
                    }
                }
                console.log(res.data)
                //试图获取点赞商品的图片
                let myself = self
                let TempStarsList = []
                for(let index=0;index<self.allStarsList.length;index++){
                    TempStarsList.push(self.allStarsList[index].coverUUID)
                }

                for (let i = 0; i < TempStarsList.length; i++) {
                    self.starsCoverList[i] = ''
                    axios({
                        method: 'get',
                        url: "/file/sig/product/" + TempStarsList[i],
                        responseType: 'blob'
                    }).then(function (res) {
                        //good
                        myself.$set(myself.starsCoverList, i, window.URL.createObjectURL(res.data))
                    })
                }
            })
        },
        methods: {
            brief(val){
                this.$router.replace({name: 'ProductBrief', params: {productId: val}});
            },
            handlePage(value) {
                this.nowPage = value
                this.search()
            },
            search() {
                let self = this
                this.starsList1.splice(0, this.starsList1.length)
                this.starsList2.splice(0, this.starsList2.length)
                this.starsList3.splice(0, this.starsList3.length)
                this.starsList4.splice(0, this.starsList4.length)
                axios({
                    method: 'get',
                    url: '/product/starList/' + globalData.USER.userId + "/" + this.nowPage
                }).then(function (res) {

                    for (let i = 0; i < res.data.content.length; i++) {
                        if (i % 4 === 0) {
                            self.starsList1.push(res.data.content[i])
                        } else if (i % 4 === 1) {
                            self.starsList2.push(res.data.content[i])
                        } else if (i % 4 === 2) {
                            self.starsList3.push(res.data.content[i])
                        } else {
                            self.starsList4.push(res.data.content[i])
                        }
                    }
                    //试图获取点赞商品的图片
                    let myself=self
                    let TempStarsList = []
                    let ListSize = [
                        self.starsList1.length,
                        self.starsList2.length,
                        self.starsList3.length,
                        self.starsList4.length
                    ]
                    let index=0
                    for (; index < ListSize[3]; index++) {
                        TempStarsList.push(self.starsList1[index].coverUUID)
                        TempStarsList.push(self.starsList2[index].coverUUID)
                        TempStarsList.push(self.starsList3[index].coverUUID)
                        TempStarsList.push(self.starsList4[index].coverUUID)
                    }
                    if(ListSize[0]>index){
                        TempStarsList.push(self.starsList1[index+1].coverUUID)
                    }
                    if(ListSize[1]>index){
                        TempStarsList.push(self.starsList2[index+1].coverUUID)
                    }
                    if(ListSize[2]>index){
                        TempStarsList.push(self.starsList3[index+1].coverUUID)
                    }

                    for (let i = 0; i < TempStarsList.length; i++) {
                        self.starsCoverList[i] = ''
                        axios({
                            method: 'get',
                            url: "/file/sig/product/" + TempStarsList[i],
                            responseType: 'blob'
                        }).then(function (res) {
                            //good
                            myself.$set(myself.starsCoverList, i, window.URL.createObjectURL(res.data))
                            // console.log(self.CoverList[0])
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .mid {
        position: relative;
        margin: 0 auto;
        text-align: center;
    }
</style>